
<template>
  <view class="help-feedback">
    <!-- 顶部导航 -->
    <view class="header">
      <uni-icons class="back-icon" type="left" size="20" color="#333333" @click="back"></uni-icons>
      <text class="title">帮助与反馈</text>
    </view>

    <!-- 常见问题区域 -->
    <scroll-view class="content" scroll-y>
      <view class="section common-questions">
        <view class="section-title">常见问题</view>
        <view class="question-list">
          <view class="question-item" v-for="(item, index) in questionList" :key="index">
            <uni-icons :type="item.icon" size="24" color="#666666"></uni-icons>
            <text class="question-text">{{ item.title }}</text>
            <uni-icons class="arrow" type="right" size="16" color="#CCCCCC"></uni-icons>
          </view>
        </view>
      </view>

      <!-- 反馈入口 -->
      <view class="section feedback-entry">
        <view class="section-title">问题反馈</view>
        <view class="feedback-list">
          <view class="feedback-item" v-for="(item, index) in feedbackList" :key="index">
            <view class="feedback-left">
              <uni-icons :type="item.icon" size="28" color="#666666"></uni-icons>
              <view class="feedback-info">
                <text class="feedback-title">{{ item.title }}</text>
                <text class="feedback-desc">{{ item.desc }}</text>
              </view>
            </view>
            <uni-icons class="arrow" type="right" size="16" color="#CCCCCC"></uni-icons>
          </view>
        </view>
      </view>

      <!-- 联系方式 -->
      <view class="section contact">
        <view class="section-title">联系我们</view>
        <view class="contact-list">
          <view class="contact-item">
            <uni-icons type="phone" size="24" color="#666666"></uni-icons>
            <text class="contact-text">客服电话：400-888-8888</text>
          </view>
          <view class="contact-item">
            <uni-icons type="chat" size="24" color="#666666"></uni-icons>
            <view class="contact-info">
              <text class="contact-text">在线客服</text>
              <text class="contact-desc">工作时间：09:00-18:00</text>
            </view>
          </view>
          <view class="contact-item">
            <uni-icons type="email" size="24" color="#666666"></uni-icons>
            <text class="contact-text">邮箱：support@example.com</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const questionList = ref([
  { icon: 'info', title: '如何修改个人信息？' },
  { icon: 'wallet', title: '支付相关问题' },
  { icon: 'shop', title: '订单相关问题' },
  { icon: 'gift', title: '优惠券使用说明' },
  { icon: 'medal', title: '会员等级规则' },
  { icon: 'help', title: '其他常见问题' }
]);

const feedbackList = ref([
  {
    icon: 'help',
    title: '问题反馈',
    desc: '使用过程中遇到问题'
  },
  {
    icon: 'staff',
    title: '建议反馈',
    desc: '期待您的建议'
  }
]);
const back = () => {
	uni.navigateBack({
		delta: 1
	})
}
</script>

<style>
page {
  height: 100%;
}

.help-feedback {
  height: 100%;
  background-color: #F5F5F5;
  display: flex;
  flex-direction: column;
}

.header {
  position: relative;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  padding: 0 32rpx;
}

.back-icon {
  position: absolute;
  left: 32rpx;
}

.title {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}

.content {
  flex: 1;
  overflow: auto;
  padding: 32rpx;
}

.section {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  margin-bottom: 32rpx;
}

.question-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1px solid #F5F5F5;
}

.question-item:last-child {
  border-bottom: none;
}

.question-text {
  flex: 1;
  font-size: 14px;
  color: #333333;
  margin-left: 16rpx;
}

.feedback-list {
  background-color: #FFFFFF;
}

.feedback-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 0;
  border-bottom: 1px solid #F5F5F5;
}

.feedback-item:last-child {
  border-bottom: none;
}

.feedback-left {
  display: flex;
  align-items: center;
}

.feedback-info {
  margin-left: 16rpx;
}

.feedback-title {
  font-size: 14px;
  color: #333333;
  margin-bottom: 8rpx;
  display: block;
}

.feedback-desc {
  font-size: 12px;
  color: #999999;
  display: block;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1px solid #F5F5F5;
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-info {
  margin-left: 16rpx;
}

.contact-text {
  font-size: 14px;
  color: #333333;
  margin-left: 16rpx;
}

.contact-desc {
  font-size: 12px;
  color: #999999;
  margin-left: 16rpx;
  display: block;
}

.arrow {
  flex-shrink: 0;
}
</style>

